﻿@*
    For more information on enabling MVC for empty projects, visit https://go.microsoft.com/fwlink/?LinkID=397860
*@
@{
}


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Demo</title>
    <!-- 请勿在项目正式环境中引用该 layui.css 地址 -->
    <link href="//unpkg.com/layui@2.11.6/dist/css/layui.css" rel="stylesheet">
</head>
<body>
    <div class="layui-upload">
        <button type="button" class="layui-btn layui-btn-normal" id="ID-upload-demo-files">选择多文件</button>
        <div class="layui-upload-list">
            <table class="layui-table">
                <colgroup>
                    <col style="min-width: 100px;">
                    <col width="150">
                    <col width="260">
                    <col width="150">
                </colgroup>
                <thead>
                <th>文件名</th>
                <th>大小</th>
                <th>上传进度</th>
                <th>操作</th>
                </thead>
                <tbody id="ID-upload-demo-files-list"></tbody>
            </table>
        </div>
        <button type="button" class="layui-btn" id="ID-upload-demo-files-action">开始上传</button>
    </div>

    <!-- 请勿在项目正式环境中引用该 layui.js 地址 -->
    <script src="//unpkg.com/layui@2.11.6/dist/layui.js"></script>
    <script>
        layui.use(function () {
            var upload = layui.upload;
            var element = layui.element;
            var $ = layui.$;
            // 制作多文件上传表格
            var uploadListIns = upload.render({
                elem: '#ID-upload-demo-files',
                elemList: $('#ID-upload-demo-files-list'), // 列表元素对象
                url: '', // 实际使用时改成您自己的上传接口即可。
                accept: 'file',
                multiple: true,
                number: 3,
                auto: false,
                bindAction: '#ID-upload-demo-files-action',
                choose: function (obj) {
                    var that = this;
                    var files = this.files = obj.pushFile(); // 将每次选择的文件追加到文件队列
                    // 读取本地文件
                    obj.preview(function (index, file, result) {
                        var tr = $(['<tr id="upload-' + index + '">',
                        '<td>' + file.name + '</td>',
                        '<td>' + (file.size / 1024).toFixed(1) + 'kb</td>',
                        '<td><div class="layui-progress" lay-filter="progress-demo-' + index + '"><div class="layui-progress-bar" lay-percent=""></div></div></td>',
                            '<td>',
                            '<button class="layui-btn layui-btn-xs demo-reload layui-hide">重传</button>',
                            '<button class="layui-btn layui-btn-xs layui-btn-danger demo-delete">删除</button>',
                            '</td>',
                            '</tr>'].join(''));

                        // 单个重传
                        tr.find('.demo-reload').on('click', function () {
                            obj.upload(index, file);
                        });

                        // 删除
                        tr.find('.demo-delete').on('click', function () {
                            delete files[index]; // 删除对应的文件
                            tr.remove(); // 删除表格行
                            // 清空 input file 值，以免删除后出现同名文件不可选
                            uploadListIns.config.elem.next()[0].value = '';
                        });

                        that.elemList.append(tr);
                        element.render('progress'); // 渲染新加的进度条组件
                    });
                },
                done: function (res, index, upload) { // 成功的回调
                    var that = this;
                    // if(res.code == 0){ // 上传成功
                    var tr = that.elemList.find('tr#upload-' + index)
                    var tds = tr.children();
                    tds.eq(3).html(''); // 清空操作
                    delete this.files[index]; // 删除文件队列已经上传成功的文件
                    return;
                    //}
                    this.error(index, upload);
                },
                allDone: function (obj) { // 多文件上传完毕后的状态回调
                    console.log(obj)
                },
                error: function (index, upload) { // 错误回调
                    var that = this;
                    var tr = that.elemList.find('tr#upload-' + index);
                    var tds = tr.children();
                    // 显示重传
                    tds.eq(3).find('.demo-reload').removeClass('layui-hide');
                },
                progress: function (n, elem, e, index) { // 注意：index 参数为 layui 2.6.6 新增
                    element.progress('progress-demo-' + index, n + '%'); // 执行进度条。n 即为返回的进度百分比
                }
            });
        });
    </script>

</body>
</html>
